<template lang="pug">
    div(class="amount-control", v-if="visible")
        div(class="header")
        div(class="body")
            div() {{model.name}}
            div(class="amount") 
                span {{model.amount}}{{model.unit}}
                i(class="iconfont") &#xe60b;

</template>

<script>
export default {
  name: "amount-control",
  props:{
      model:{type:Object, default(){
          return {
              amount:0,
              name: '无标题',
              unit: 'U'
          }
       }},
      visible: {type:Boolean,default: false},
  },
  model: {event:'update', prop: "model"},
  methods: {
    
  }
};
</script>

<style lang="less"> 

// @mainColor: #212529;
// @fontColor: #eaeaea;

// .amount-control{
//     border: 1px solid @mainColor;
//     background-color: white;
//     position: absolute;
//     top:0;
//     bottom:0;
//     width:87%;
//     text-align: center;
//     left:0;
//     right: 0;
//     margin: auto;
//     height: 65%;
//     font-family: "meixiao";

//     .header{
//         background-color: @mainColor;
//         height: 20%;
//     }
//     .body{
//         padding: 5% 0;

//         .amount{
//             background-color: @mainColor;
//             color:@fontColor;
//             width:54%;
//             margin: auto;
//             text-align: center;

//             i{
//                 font-size: 70%;
//             }
//         }
//     }
// }
</style>
